<script lang='ts' setup name='Person'>
import { ref } from 'vue'
let props = withDefaults(defineProps<{
    name: string,
    age: number,
    address: string,
    max?: number    //可选属性
}>(),

    {
        max: 999999
    }

)
//单项数据流

console.log("props  ", props);

function isEmptyObject(obj:object) {
  return Object.keys(obj).length === 0;
}


</script>

<template>

    <div class="container">
        <div>
            <span class="title">name:</span>
            <span class="content">{{ name }}</span>
        </div>
        <div>
            <span class="title">age:</span>
            <span class="content">{{ age }}   </span>
        </div>
        <div>
            <span class="title">address:</span>
            <span class="content">{{ address }}</span>
        </div>
        <div>
            <span class="title">max:</span>
            <span class="content">{{ max }}</span>
        </div>

        
        <div  v-if="!isEmptyObject($attrs)">
            <span class="title">attrs:</span>
            <span class="content">{{ $attrs }}:{{ $attrs.length }}</span>
        </div>

    </div>

</template>

<style scoped>
.container {
    background-color: skyblue;
    border-radius: 15px;
    box-shadow: 0 0 10px grey;
    margin: 10px;
    padding: 20px;
}
</style>